import { setLocale, useIntl, FormattedMessage, connect } from 'umi';
import { useState, useRef } from 'react';
import { Button, Dropdown, Menu, Space, Tag, Modal } from 'antd';
import route from '@/assets/route';
import Draggable from 'react-draggable';
import { Rnd } from 'react-rnd';
import styles from './index.less';

import PopContainer from './tan/index';
import ReactMovableModal from './ReactMovable/ReactMovableModal.tsx';
import BodyContent from './ReactMovable/BodyContent.tsx';
import React from 'react';

const Welcome: React.FC = (props) => {
  const [visible1, setVisible1] = useState(false);
  const [visible2, setVisible2] = useState(false);
  const [bigBodyStyle, setBigBodyStyle] = useState<any>({});
  const [bigallstyle, setBigAllstyle] = useState<any>({});
  const [bigwidthflag, setBigwidthflag] = useState<any>(500);

  const intl = useIntl(); // 国际化
  const t = (id: any) => intl.formatMessage({ id }); // 写成传参方式
  // console.log('props', props);

  // 移动弹框
  const [open, setOpen] = useState(false);
  const [disabled, setDisabled] = useState(false);
  const [bounds, setBounds] = useState({
    left: 0,
    top: 0,
    bottom: 0,
    right: 0,
  });
  const draggleRef = useRef<HTMLDivElement>(null);

  const showModal = () => {
    setOpen(true);
  };

  const handleOk = (e: React.MouseEvent<HTMLElement>) => {
    setOpen(false);

    setBigBodyStyle({});
    setBigAllstyle({});
    setBigwidthflag(500);
  };

  const handleCancel = (e: React.MouseEvent<HTMLElement>) => {
    setOpen(false);

    setBigBodyStyle({});
    setBigAllstyle({});
    setBigwidthflag(500);
  };

  const onStart = (_event: DraggableEvent, uiData: DraggableData) => {
    console.log('_event', _event, 'uiData', uiData);

    const { clientWidth, clientHeight } = window.document.documentElement;
    const targetRect = draggleRef.current?.getBoundingClientRect();

    if (!targetRect) {
      return;
    }
    setBounds({
      left: -targetRect.left + uiData.x,
      right: clientWidth - (targetRect.right - uiData.x),
      top: -targetRect.top + uiData.y,
      bottom: clientHeight - (targetRect.bottom - uiData.y),
    });
  };

  const onStop = (_event: DraggableEvent, uiData: DraggableData) => {
    console.log('_event1', _event, 'uiData1', uiData);
  };

  // const intl = useIntl();
  // const msg = intl.formatMessage({
  //   id: 'welcome',
  // });

  return (
    <div className={styles.welcomeStyle}>
      <Button
        onClick={() => {
          setOpen(true);
        }}
      >
        打开弹窗3
      </Button>

      {props.username}

      <Modal
        style={bigallstyle}
        bodyStyle={bigBodyStyle}
        width={bigwidthflag}
        title={
          <div
            style={{
              width: '100%',
              cursor: 'move',
            }}
            onMouseOver={() => {
              if (disabled) {
                setDisabled(false);
              }
            }}
            onMouseOut={() => {
              setDisabled(true);
            }}
            onFocus={() => {}}
            onBlur={() => {}}
          >
            Draggable Modal
            <Button
              onClick={() => {
                setBigAllstyle({
                  top: 0,
                  paddingBottom: 0,
                });
                setBigBodyStyle({
                  height: 'calc(100vh - 124px )',
                  width: '100vw',
                });
                setBigwidthflag('100%');
              }}
            >
              放大
            </Button>
            <Button>缩小</Button>
          </div>
        }
        open={open}
        onOk={handleOk} //关闭弹窗
        onCancel={handleCancel} // 打开弹窗
        modalRender={(modal) => {
          return (
            <Draggable
              disabled={disabled}
              bounds={bounds}
              onStart={(event, uiData) => onStart(event, uiData)}
              onStop={(event, uiData) => onStop(event, uiData)}
            >
              <div ref={draggleRef}>{modal}</div>
            </Draggable>
          );
        }}
      >
        1212
      </Modal>

      <p>{t('welcome')}</p>
      <p>{t('menu.CustomertoSubmitted')}</p>
      <p>{t('form.region')}</p>
    </div>
  );
};

export default connect((state: any) => ({
  username: state.global.username,
  password: state.user.password,
}))(Welcome);
